<template>
	<view :class="baseBtnClass" @click="handleClick" @touchstart="onTouchStart" @touchend="onTouchEnd"
		@touchcancel="onTouchEnd">
		{{ text }}
	</view>
</template>

<script>
	export default {
		name: "base-button",
		props: {
			text: {
				type: String,
				default: "按钮"
			},
			type: {
				type: String,
				default: "primary"
			},
			size: {
				type: String,
				default: "large"
			},
			shape: {
				type: String,
				default: "square"
			},
			disabled: {
				type: Boolean,
				default: false,
			},
		},
		data() {
			return {
				isPressed: false,
				clickSound: null
			};
		},
		beforeDestroy() {
			// 销毁时释放资源
			if (this.clickSound) {
				this.clickSound.destroy();
			}
		},
		computed: {
			baseBtnClass() {
				const sizeToClass = {
					'large': 'base-button-large',
					'mini': 'base-button-mini'
				};
				const shapeSuffix = {
					'large': {
						'square': 'base-button-large-square',
						'circle': 'base-button-large-circle',
					},
					'mini': {
						'square': 'base-button-mini-square',
						'circle': 'base-button-mini-circle',
					},
				};
				const bgColorSuffix = {
					'primary': 'base-button-primary',
					'default': 'base-button-default',
				};
				const sizeClass = sizeToClass[this.size] || '';
				const shapeClass = shapeSuffix[this.size][this.shape] || '';
				const disabledClass = this.disabled ? ' base-button-disabled' : '';
				const bgColorClass = bgColorSuffix[this.type] || '';
				const pressedClass = this.isPressed && !this.disabled ? ' base-button-pressed' : '';

				return `${sizeClass} ${shapeClass} ${disabledClass} ${bgColorClass}${pressedClass}`;
			}
		},
		methods: {
			handleClick() {
				if (this.disabled) return;

				// 播放点击音效
				if (this.clickSound) {
					this.clickSound.play().catch(err => {
						console.log('播放音效失败', err);
					});
				}

				this.$emit("click");
			},
			onTouchStart() {
				if (this.disabled) return;
				this.isPressed = true;
			},
			onTouchEnd() {
				if (this.disabled) return;
				// 延长视觉反馈时间
				setTimeout(() => {
					this.isPressed = false;
				}, 200);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.base-button-large {
		width: 500rpx;
		height: 96rpx;
		font-size: 35rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto;
		transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	}

	.base-button-large-square {
		border-radius: 20rpx;
	}

	.base-button-large-circle {
		border-radius: 48rpx;
	}

	.base-button-mini {
		width: 180rpx;
		height: 54rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	}

	.base-button-mini-square {
		border-radius: 10rpx;
	}

	.base-button-mini-circle {
		border-radius: 28rpx;
	}

	.base-button-disabled {
		background-color: #BBBBBB !important;
		opacity: 0.7;
		cursor: not-allowed;
	}

	.base-button-primary {
		background-color: #fa7601;
	}

	.base-button-default {
		background-color: #D0D0D0;
	}

	.base-button-pressed {
		// 更明显的视觉变化
		transform: scale(0.96);
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);

		// 暗色变体
		&.base-button-primary {
			background-color: #c85e00;
		}

		&.base-button-default {
			background-color: #B0B0B0;
		}
	}
</style>